<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-19 16:32:29
 * @LastEditTime: 2020-05-22 11:21:43
 * @FilePath: \client\src\views\admin\WriteArticle.vue
 * @Description: 写文章页面
 -->

<template>
  <b-container class="main bg-img">
    <b-form inline>
      <!-- mr-sm-2 表示，margin-right mb-sm-0 表示margin-buttom -->
      <b-form-input class="mr-sm-2 mb-sm-0 title" v-model="article.title" placeholder="请输入标题......"></b-form-input>
      <b-button variant="primary" @click="checkTitleContent()">提交</b-button>
    </b-form>
    <mavon-editor
      ref="md"
      @imgAdd="$imgAdd"
      class="editor"
      :ishljs="true"
      v-model="article.content"
    />
    <div class="msg">{{msg}}</div>
    <!-- 发布博客弹出框 -->
    <b-modal id="submit-modal" hide-footer :title="'发布博客：'+article.title">
      <b-form>
        <b-form-group label="标签:" label-for="tags">
          <b-form-tags
            v-model="article.tags"
            class="mb-2"
            tag-variant="success"
            placeholder="输入标签，回车添加..."
          ></b-form-tags>
        </b-form-group>
        <b-form-group label="分类:" label-for="category">
          <b-form inline>
            <b-form-select
              id="category"
              class="category-input"
              v-model="article.category"
              :options="categories"
            ></b-form-select>
            <b-button variant="light" class="btn85" @click="showAddCate = !showAddCate">自定义</b-button>
          </b-form>
          <b-form inline v-show="showAddCate">
            <b-form-input v-model="newCatagory" placeholder="请输入要添加的分类..." class="category-input"></b-form-input>
            <b-button @click="addCatagory()" variant="primary" class="btn85">确定</b-button>
          </b-form>
        </b-form-group>

        <b-form-group label="摘要:" label-for="tabloid">
          <b-form-textarea
            id="tabloid"
            v-model="article.tabloid"
            rows="4"
            placeholder="请输入文章的摘要..."
          ></b-form-textarea>
        </b-form-group>

        <b-form-group label="文章类型:">
          <b-form-group required="true">
            <b-form-radio v-model="article.type" name="type" value="1">原创</b-form-radio>
            <b-form-radio v-model="article.type" name="type" value="2">转载</b-form-radio>
          </b-form-group>
        </b-form-group>
        <b-form-group label="作者:" v-if="article.type == 2">
          <b-form-input v-model="author" placeholder="请输入作者..."></b-form-input>
        </b-form-group>
        <hr />
        <div class="btn-box">
          <b-button @click="onSubmit()" variant="primary">提交</b-button>
          <b-button @click="onReset()" variant="danger">重置</b-button>
        </div>
      </b-form>
    </b-modal>
  </b-container>
</template>

<script>
import url from "@/request/url";

export default {
  name: "WriteArticle",
  data() {
    return {
      msg: "",
      categories: ["请选择文章分类..."],
      newCatagory: "",
      showAddCate: false,

      article: {
        id: "",
        draftId: null,
        title: "",
        content: "",
        tags: [],
        category: "",
        tabloid: "",
        type: 1,
        author: ""
      }
    };
  },
  methods: {
    resetArticle() {
      this.article = {
        id: "",
        draftId: null,
        title: "",
        content: "",
        tags: [],
        category: "",
        tabloid: "",
        type: 1,
        author: ""
      };
    },
    // 绑定@imgAdd event
    $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("image", $file);
      this.$axios.post(url.admin.uploadImg, formdata).then(resp => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        // $vm.$img2Url 详情见本页末尾
        this.$refs.md.$img2Url(pos, resp.data);
      });
    },
    showToast(msg) {
      this.$bvToast.toast(msg, {
        title: "提示",
        variant: "danger",
        solid: true,
        toaster: "b-toaster-top-center"
      });
    },
    checkTitleContent() {
      if (!this.article.title.trim()) {
        this.showToast("标题不能为空！");
      } else if (!this.article.content.trim()) {
        this.showToast("内容不能为空！");
      } else {
        this.$bvModal.show("submit-modal");
      }
    },
    addCatagory() {
      // 如果什么都没有输入的话直接返回
      if (!this.newCatagory.trim()) {
        return;
      }
      this.categories.push(this.newCatagory);
      this.article.category = this.newCatagory;
      this.newCatagory = "";
      this.showAddCate = !this.showAddCate;
    },
    onSubmit() {
      if (
        this.category == "请选择文章分类..." ||
        this.tags == "" ||
        this.category == "" ||
        this.tabloid == ""
      ) {
        this.showToast("请正确填写文章信息");
        return;
      }
      if (this.type == 2 && this.author == "") {
        this.showToast("文章作者不能为空");
        return;
      }
      if (!this.article.id) {
        this.$axios.post(url.admin.articles, this.article).then(resp => {
          this.$bvModal.hide("submit-modal");
          // 跳到主界面
          this.$bvToast.toast("文章发布成功", {
            title: "提示",
            variant: "success",
            solid: true,
            toaster: "b-toaster-top-center"
          });
          this.resetArticle();
        });
      } else {
        this.$axios.put(url.admin.articles, this.article).then(resp => {
          this.$bvModal.hide("submit-modal");
          // 跳到主界面
          this.$bvToast.toast("文章更新成功", {
            title: "提示",
            variant: "success",
            solid: true,
            toaster: "b-toaster-top-center"
          });
          this.resetArticle();
        });
      }
    },
    onReset() {
      this.article.tags = "";
      this.article.category = "";
      this.article.tabloid = "";
      this.article.type = 1;
    }
  },
  created() {
    // 获取所有标签内容
    this.$axios.get(url.comm.categories).then(resp => {
      resp.data.forEach(item => {
        this.categories.push(item.category);
      });
    });
  },
  activated() {
    let articleId = this.$route.query.articleId;
    let draftId = this.$route.query.draftId;
    if (articleId) {
      this.$axios.get(url.comm.getArticleById + articleId).then(res => {
        this.article = res.data;
      });
    }
  }
};
</script>

<style scoped>
.editor {
  margin-top: 10px;
  min-height: 550px;
  z-index: inherit;
}
.title {
  width: 90%;
}
.msg {
  font-size: 13px;
  margin-top: 8px;
  color: #00000085;
}
.tag {
  margin: 5px;
}
.tag ::before {
  margin-right: 5px;
  font-size: 11px;
}
.category-input {
  width: 70%;
  margin-top: 4px;
  margin-right: 6px;
}
.btn-box {
  display: flex;
  justify-content: space-around;
}
.btn85 {
  width: 85px;
}
</style>